<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Canvas 绘制图形</title>
	<style>
		body {
			background: #666;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		canvas {
			background: #fff;
		}
	</style>
</head>

<body>
	<div>
		<img src="/assets/img/avatar.jpg" style="margin-left: 50px" width="150px" height="100px" alt="" />
		<h1>绘制图形</h1>
		<canvas id="canvas1" width="500" height="500"></canvas>
		<script>
			let oCanvas = document.getElementById('canvas1');
			let ctx = oCanvas.getContext('2d'); //拿到画笔

			let img = new Image();
			img.src = '/assets/img/avatar.jpg';

			img.onload = () => {
				// 绘制图形 如果只传递 3 个参数
				// ctx.drawImage(
				//   img,      // 图形
				//   150, 180  // 坐标
				// )

				// 绘制图形 如果传递 5 个参数
				// ctx.drawImage(
				//   img, // 图形
				//   150, 150, // 坐标
				//   300, 150, // 绘制后的图像大小
				// )

				// 绘制图形 如果传递 9 个参数: 裁剪
				// ctx.drawImage(
				// 	img,
				// 	50, 50, // 从 坐标为x/y 的点开始绘制
				// 	150, 100 // 可选。图像的高度。
				// );

				// 剪切图像 如果传递 9 个参数: 裁剪
				ctx.drawImage(
					img,
					50, 50, // 开始剪切的 xy 坐标
					150, 100, // 被剪切图像的宽度和高度。0, 0, // 在画布上放置图像的 x/y 坐标
					150, 150 // 可选。图像的宽度和高度。
				);
			};
		</script>
	</div>
</body>

</html>